<template>
  <div class="app-container">

    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="生产时间">
            <el-date-picker
              v-model="daterangeTime"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="18" align="right">
          <el-form-item >
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-download"
            size="mini"
            @click="printBox"
          >打印</el-button>
        </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['diagram:outbound:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="outboundList" id="printBox">
      <h1 style="text-align: center;display: block">产量统计</h1>
      <br>
      <br>
      <p>打印人：{{this.creatorName}}</p>
      <p>打印时间：{{this.creatTime}}</p>
<!--      <el-table-column type="selection" width="55" align="center" />-->
      <el-table-column label="生产日期" align="center" prop="prProductionDate" />
      <el-table-column label="产品编码" align="center" prop="prProductCode" />
      <el-table-column label="产品名称" align="center" prop="pdName" />
      <el-table-column label="产品型号" align="center" prop="pdSpecType" />
      <el-table-column label="任务数量" align="center" prop="scheduleNum" />
      <el-table-column label="生产数量" align="center" prop="reportCompleteNum" />
      <el-table-column label="合格数量" align="center" prop="reportGood" />
      <el-table-column label="生产合格率" align="center" prop="rate" />
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { listOutbound } from '@/api/yyj/diagram/outbound'
import print from 'print-js'

export default {
  name: "Outbound",
  dicts: ['yyj_common_status','gbs_good_type', 'gbs_good_attr'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 产量统计表格数据
      outboundList: [],
      daterangeTime: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      creatTime:null,
      creatorName:null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        prProductionDate: null,
        prProductCode: null,
        pdName: null,
        pdSpecType: null,
        scheduleNum: null,
        reportCompleteNum: null,
        reportGood: null,
        prCode: null,
        scheduleCode: null,
        workOrderCode: null,
        reportCode: null,
        beginCreateTime:null,
        endCreateTime:null,
        rate:null,
        creatorName:null
      },
      // 表单参数
      form: {},
    };
  },
  computed: {
    getGbsGoodAttr() {
      return this.dict.type.gbs_good_attr
    },
    getGbsGoodType() {
      return this.dict.type.gbs_good_type
    },
  },
  created() {
    this.getList();
    this.setCreatTime();
  },
  methods: {
    setCreatTime() {
      const now = new Date();
      const year = ('0' + now.getFullYear()).slice(-4);
      const month = ('0' + (now.getMonth() + 1)).slice(-2);
      const day = ('0' + now.getDate()).slice(-2);
      const hours = ('0' + now.getHours()).slice(-2);
      const minutes = ('0' + now.getMinutes()).slice(-2);
      const seconds = ('0' + now.getSeconds()).slice(-2);
      this.creatTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    //打印
    printBox(){
      setTimeout(function(){
        const style=`
            #printBox .el-table__body tr > td {
                padding: 20px 0 !important; /* 调整padding大小 */
                line-height: 2.0; /* 增加行间距 */
            }
            #printBox .el-table__header tr > th {
              padding: 20px 0 !important; /* 调整padding大小 */
              line-height: 2.0; /* 增加行间距 */
            }
            @page {
              size:auto;margin-top:100px; margin-left:30px; margin-right: 10px;
            }
            thead th {
              border-top: 1px solid #000;
              border-right: 1px solid #000;
              border-left: 1px solid #000;
            }
            tbody td {
              border: 1px solid #000;
            }
            body {zoom: 50%;}
            tbody {
              text-align: center;
            }
            table {
              border-collapse: collapse;
              table-layout: fixed; /* 新增这行 */
            }`;
        print({
          printable:'printBox',
          type: 'html',
          scanStyles: false,
          style:style,
          targeStyles:['*']
        })
      },500)
    },
    /** 查询产量统计列表 */
    getList() {
      this.loading = true;
      if (null != this.daterangeTime && '' != this.daterangeTime) {
        this.queryParams.beginCreateTime = this.daterangeTime[0];
        this.queryParams.endCreateTime = this.daterangeTime[1];
      }
      listOutbound(this.queryParams).then(response => {
        this.outboundList = response.rows;
        if (this.outboundList[0] && this.outboundList[0].creatorName !== null && this.outboundList[0].creatorName !== "") {
          this.creatorName = this.outboundList[0].creatorName;
        }
        this.total = response.total;
        this.loading = false;
      });
    },
    // 表单重置
    reset() {
      this.queryParams = {
        prProductionDate: null,
        prProductCode: null,
        pdName: null,
        pdSpecType: null,
        scheduleNum: null,
        reportCompleteNum: null,
        reportGood: null,
        prCode: null,
        beginCreateTime:null,
        endCreateTime:null,
        scheduleCode: null,
        workOrderCode: null,
        reportCode: null,
        rate:null,
        creatorName:null
      };
      this.daterangeTime=[];
      this.resetForm("queryForm");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.reset();
      this.handleQuery();
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        'yyj/diagram/outbound/export',
        {
          ...this.queryParams
        },
        `outbound_${new Date().getTime()}.xlsx`
      )
    }
  }
};
</script>
<style>
</style>
